<template>
  <div class="rosterPage">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>排班报备</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="content">
      <div class="TAB">
        <div>
          <section class="selectBox">
            <span>值班队伍名称</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入值班队伍名称关键词"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>警号</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入警号关键词"
              :remote-method="remoteMethod"
            >
              <!-- remote-method远程搜索方法 -->
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>所属部门</span>
            <el-select v-model="obj_searchData.s_deparment">
              <el-option
                v-for="item in obj_returnRemoteData.arr_deparment"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="left_button">
            <button>搜索</button>
            <button>重置</button>
          </section>
        </div>
        <div class="operatingButton">
          <button @click="addRoster">新增</button>
          <button @click="batchDisable">停用</button>
        </div>
      </div>
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="arr_tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          header-row-class-name="tabel_head"
        >
          <el-table-column type="selection" min-width="10%"></el-table-column>
          <el-table-column
            label="编号"
            width="60%"
            type="index"
          ></el-table-column>
          <el-table-column prop="s_name" label="值班队伍名称">
          </el-table-column>
          <el-table-column label="值班领导"> </el-table-column>
          <el-table-column
            prop="s_deparment"
            label="所属部门"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="s_phone"
            label="关联巡区"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="s_state"
            label="人员配置数量"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="s_state"
            label="排班日期"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="s_state"
            label="时段"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <button
                class="viewButton"
                @click="handleEdit(scope.$index, scope.row)"
              >
                查看
              </button>
              <button
                class="changeButton"
                @click="handleEdit(scope.$index, scope.row)"
              >
                启用
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :currentPage="s_currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="60"
        ></el-pagination>
      </div>
    </main>
    <disableOrEnable :option='option'></disableOrEnable>
    <batchDisable ref="batchDisable"></batchDisable>
    <addRoster ref="addRoster"></addRoster>
  </div>
</template>

<script>
import batchDisable from './batchDisable'
import disableOrEnable from "./disableOrEnable";
import addRoster from './addRoster'
export default {
  components: {
    disableOrEnable,
    batchDisable,
    addRoster
  },
  data() {
    return {
        option:{
            show:false,
            isEnble:true
        },
      s_currentPage: "",
      arr_tableData: [
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "休假",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "休假",
        },
      ],
      obj_searchData: {
        s_card: "",
        s_name: "",
        s_deparment: "",
        s_userPosition: "",
      },
      // 模糊查询，远程搜索返回结果
      obj_returnRemoteData: {
        arr_card: [],
        arr_name: [],
        arr_deparment: ["两江分局", "鸳鸯派出所"],
        arr_userPosition: ["超级管理员", "管理员", "民警", "辅警"],
      },
    };
  },
  methods: {
      addRoster(){
          this.$refs.addRoster.show=true
      },
      batchDisable(){
          this.$refs.batchDisable.show=true
      },
    remoteMethod(value) {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //查看
    handleEdit(index, row) {
        console.log(111111);
        this.option={
            show:true,
            isEnble:false,
            title:'停用'
        }
    },
    //全选删除
    deleteEvent() {
      this.$confirm("是否确定删除“白小白”两个账户?", "批量删除", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/sass/roster/roster.scss";
</style>